import React, { useState } from 'react';
import { Card, Button, message } from 'antd';
import DepartmentTree from './components/DepartmentTree';
import UserTable from './components/UserTable';
import UserTransferModal from './components/UserTransferModal';
import { useDepartmentManagement } from './hooks';

const DepartmentManagement: React.FC = () => {
  const {
    departments, deptLoading, selectedDeptId, setSelectedDeptId,
    users, userLoading, fetchDeptUsers,
    transferVisible, setTransferVisible, allUsers, deptUserIds,
    handleDeptAdd, handleDeptEdit, handleDeptDelete,
    handleUserAdd, handleUserEdit, handleUserDelete,
    handleTransferChange, handleTransferOk
  } = useDepartmentManagement();

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      {/* 左侧部门树 */}
      <Card style={{ width: 300, marginRight: 24, height: '100%' }} bodyStyle={{ padding: 12 }}>
        <DepartmentTree
          departments={departments}
          loading={deptLoading}
          selectedDeptId={selectedDeptId}
          onSelect={setSelectedDeptId}
          onAdd={handleDeptAdd}
          onEdit={handleDeptEdit}
          onDelete={handleDeptDelete}
        />
      </Card>
      {/* 右侧用户表格 */}
      <div style={{ flex: 1 }}>
        <UserTable
          users={users}
          loading={userLoading}
          onAdd={handleUserAdd}
          onEdit={handleUserEdit}
          onDelete={handleUserDelete}
          onTransfer={() => setTransferVisible(true)}
        />
      </div>
      {/* 分配用户穿梭框 */}
      <UserTransferModal
        visible={transferVisible}
        allUsers={allUsers}
        targetKeys={deptUserIds}
        onChange={handleTransferChange}
        onOk={handleTransferOk}
        onCancel={() => setTransferVisible(false)}
      />
    </div>
  );
};

export default DepartmentManagement; 